import React from 'react'


class ThisTest extends React.Component {

  constructor () {// 构造器的this是组件对象
    super()
    this.handleClick4 =  () => { // 箭头函数中的this就是组件对象
      console.log(this)
      this.setState({
        count: this.state.count + 4
      })
    }
  }
  
  state = {count: 1}

  handleClick1 () {// React的事件回调this默认是undefined
    console.log(this)
    this.setState({
      count: this.state.count + 1
    })
  }

  handleClick2 (data) {
    console.log(this, data)
    this.setState({
      count: this.state.count + 2
    })
  }

  handleClick3 () {
    console.log(this)
    this.setState({
      count: this.state.count + 3
    })
  }

  /* 
  它的本质是在constructor中定义的
   */
  handleClick4 =  () => {
    console.log(this)
    this.setState({
      count: this.state.count + 4
    })
  }
 
  render () { 

    const {count} = this.state

    return (
      <div>
        <h3>当前count为: {count}</h3>
        <button onClick={this.handleClick1}>点击报错, 有this问题</button><br/>
        {/* 
        解决办法1 - 包裹箭头函数
        原理: 使用的是render中的this 组件对象
        */}
        <button onClick={() => this.handleClick2('自定义的数据')}>解决办法1 - 包裹箭头函数</button><br/>
        {/* 
        解决办法2 - bind绑定this 
        原理: 通过bind方法将函数中的this绑定为render中的this
        bind: 返回一个新函数, 新函数内部会调用原函数, 且this是bind方法指定第一个参数对象
        */}
        <button onClick={this.handleClick3.bind(this)}>解决办法2 - bind绑定this </button><br/>
        {/* 
        解决办法3 - 箭头函数
        原理: 使用的是构造器中的this (类体中的实例方法是本质是构造器中定义)
        */}
        <button onClick={this.handleClick4}>解决办法3 - 箭头函数</button>
      </div>
    )
  }
}

/* 
选择?
一般都选择 箭头函数的方式 => 编码简单
如果需要传递特定的数据, 选择 包裹箭头函数的方式
*/

export default ThisTest